<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="日期" prop="">
        <el-date-picker clearable type="date" value-format="yyyy-MM-dd" style="width: 240px"
                placeholder="请选择日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="项目编号" prop="">
        <el-input placeholder="请输入项目编号" clearable style="width: 240px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="20">
      <table cellpadding="0" cellspacing="0">
        <tr>
          <th rowspan="3" class="blue" style="width: 40%;">销售合同总金额</th>
          <th colspan="4" class="blue">按开票情况</th>
        </tr>
        <tr>
          <th colspan="3" class="blue">已开票</th>
          <th rowspan="2" class="blue">未开票</th>
        </tr>
        <tr>
          <th class="blue" style="width: 15%;">应收账款</th>
          <th class="blue" style="width: 15%;">到账金额</th>
          <th class="blue" style="width: 15%;">未收账款</th>
        </tr>
      </table>
      <table cellpadding="0" cellspacing="0">
        <tr>
          <th rowspan="3" style="width: 20%;">材料采购A、B项</th>
          <th rowspan="2" class="green" style="width: 20%;">采购合同总金额</th>
          <th colspan="3" class="green">已开票</th>
          <th rowspan="2" class="green">未开票</th>
        </tr>
        <tr>
          <th class="green" style="width: 15%;">应收账款</th>
          <th class="green" style="width: 15%;">到账金额</th>
          <th class="green" style="width: 15%;">未收账款</th>
        </tr>
      </table>
      <table cellpadding="0" cellspacing="0">
        <tr>
          <th rowspan="3" style="width: 20%;">工程施工C项<br/>
（科锐信看作是外部施工队）</th>
          <th rowspan="2" class="pink" style="width: 20%;">施工合同总金额</th>
          <th colspan="3" class="pink">已开票</th>
          <th rowspan="2" class="pink">未开票</th>
        </tr>
        <tr>
          <th class="pink" style="width: 15%;">应收账款</th>
          <th class="pink" style="width: 15%;">到账金额</th>
          <th class="pink" style="width: 15%;">未收账款</th>
        </tr>
      </table>
      <table cellpadding="0" cellspacing="0">
        <tr>
          <th rowspan="3" style="width: 20%;">C23外包设计费</th>
          <th rowspan="2" class="blueP" style="width: 20%;">设计合同总金额</th>
          <th colspan="3" class="blueP">已开票</th>
          <th rowspan="2" class="blueP">未开票</th>
        </tr>
        <tr>
          <th class="blueP" style="width: 15%;">应收账款</th>
          <th class="blueP" style="width: 15%;">到账金额</th>
          <th class="blueP" style="width: 15%;">未收账款</th>
        </tr>
      </table>
      <table cellpadding="0" cellspacing="0">
        <tr>
          <th rowspan="3" style="width: 40%;">公司支出</th>
          <th class="yellow" style="width: 30%;">公共发生额</th>
          <th class="yellow" style="width: 30%;">工资发生额</th>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
        </tr>
      </table>
      <table cellpadding="0" cellspacing="0">
        <tr>
          <th style="width: 40%;">项目收入-总计</th>
          <th style="width: 30%;">实收实付</th>
          <th style="width: 30%;">公司收支预测-余额</th>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
      </table>
    </el-row>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";

export default {
  name: "User",
  dicts: ['sys_normal_disable', 'sys_user_sex'],
  components: { },
  data() {
    return {
      queryParams: {

      },
      showSearch: true
    };
  },
  watch: {
    
  },
  created() {
   
  },
  methods: {
   
  }
};
</script>
<style lang="scss" scoped>
table{
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  th, td{
    border: 1px solid #dfe6ec;
    color: #515a6e;
    padding: 5px;
    font-size: 14px;
  }
  th{
    // background: #f8f8f9;
  }
  .blue{
    background: #bdd7ee;
  }
  .green{
    background: #92d050;
  }
  .pink{
    background: #f8cbad;
  }
  .blueP{
    background: #00b0f0;
  }
  .yellow{
    background: #ffff00;
  }
}
</style>